<template>
  <div class="listBox" v-for="item in list">
    <div class="itemBox">
      <div @click="goDoctorDetail(item.creatorId)" class="son">
        <div class="headImg">
          <img :src="item.creatorAvatar" alt="">
        </div>
        <div class="div1">
          <p>{{ item.creatorName }}</p>
          <span>{{ item.creatorHospatalName }}</span>
        </div>
        <div class="collect" :class="item.collectionFlag === 1 ? 'onCollect' : ''" @click.stop="onCollection(item)">
          {{ item.collectionFlag === 1 ? '已收藏' : '收藏' }}
        </div>
      </div>
      <div class="son1" @click="goArticleDetail(item.id)">
        <p class="title1">{{ item.title }}</p>
        <p class="topic"># {{ item.topic }}</p>
        <div class="title2">
          {{ item.content.replace(/[^\u4e00-\u9fa5]/gi, "") }}
        </div>
        <div class="imgBox">
          <img :src="item.coverUrl[0]" alt="">
        </div>
        <p style="font-size: 12px;color: #CFCFD1;">{{ item.collectionNumber }}收藏 &nbsp; {{ item.commentNumber }}评论</p>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { defineEmits, defineProps } from 'vue';
import type { rowss } from '@/types/types'
import { useRouter } from 'vue-router';
defineProps<{
  list?: rowss[]
}>()
const emits = defineEmits(['onCollect'])
// 控制是否收藏
const router = useRouter()
// creatorId 是医生详情信息 需要的id
// id 是获取文章需要的id
// 去医生详情页
const goDoctorDetail = (val: string) => {
  router.push(`/doctorDetail/${val}`)
}
// 去列表详情页
const goArticleDetail = (val: string) => {
  router.push(`/articleDetail/${val}`)
}
// 收藏接口/取消收藏接口
// post /collect
const onCollection = (val: rowss) => {
  emits('onCollect', val)
}


</script>

<style scoped lang="scss">
.html-parse {
  p {
    img {
      width: 50px !important;
      height: 50px !important;
    }
  }

}

.listBox {
  padding: 0 15px;

  .itemBox {
    padding: 15px 0;

    .son {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;

      .headImg {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 10px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      .div1 {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 40px;
        justify-content: center;

        p {
          flex: 1;
          display: flex;
          align-items: center;
          font-size: 14px;
          margin: 0;
          padding: 0;
          height: 100%;
        }

        span {
          flex: 1;
          display: flex;
          align-items: center;
          font-size: 12px;
          white-space: nowrap;
          color: #C3C3C5;
          /*强制单行显示*/
          text-overflow: ellipsis;
          /*超出部分省略号表示*/
          overflow: hidden;
          /*超出部分隐藏*/
          width: 230px;
        }
      }

      .collect {
        flex-shrink: 0;
        text-align: center;
        display: inline-block;
        width: 36px;
        height: 18px;
        line-height: 18px;
        padding: 4px 12px;
        border: 1px solid #2cb5a5;
        border-radius: .38667rem;
        color: #2cb5a5;
        font-size: .29333rem;
      }

      .onCollect {
        background-color: rgb(238, 238, 238);
        color: #c4c4c4;
        border: 1px solid transparent;
      }
    }

    .son1 {
      width: 100%;

      .topic {
        margin: 0 0 6px 0;
        height: 18px;
        line-height: 18px;
        color: #68C9BE;
        font-size: 12px;
      }

      .title1 {
        font-size: 16px;
        margin: 6px 0;
        /*强制单行显示*/
        text-overflow: ellipsis;
        /*超出部分省略号表示*/
        overflow: hidden;
        /*超出部分隐藏*/
        width: 100%;
        line-height: 25px;
      }

      .title2 {
        width: 100%;
        overflow: hidden;
        word-wrap: break-word;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        color: #858585;
        margin-bottom: 6px;

      }

      .imgBox {
        width: 185px;
        height: 125px;
        border-radius: 15px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 15px;
        }
      }
    }

  }

}
</style>
